import React from 'react';
import { View, Text } from '@tarojs/components';
import classNames from 'classnames';
import Taro from '@tarojs/taro';
import pbarHome from '@/images/icons/home.svg';
import pshoppingCart from '@/images/icons/shoppingCart.svg';
import pme from '@/images/icons/me.svg';
import Icon from '@/components/Icon';

import './index.scss';

const menuTabList = [
  {
    name: 'homePage',
    pagePath: '/pages/mainPages/homePage/homePage',
    iconPath: pbarHome,
    iconName: 'icon_home_off',
    text: '首页',
  },
  // {
  //   name: 'industry',
  //   iconName: 'fenleitab',
  //   text: '分类',
  // },
  {
    name: 'cart',
    pagePath: '/pages/mainPages/cart/index',
    iconPath: pshoppingCart,
    iconName: 'icon_shopping_off2',
    text: '购物车',
  },
  {
    name: 'me',
    pagePath: '/pages/mine/index/index',
    iconPath: pme,
    iconName: 'icon_me_off',
    text: '我的',
  },
];

const TabsMenu = ({ tabIndex = 0, setPage, banner = {} }) => {
  let bottomHight = Taro.$bottomHight;
  if (Taro.$isH5 && window.history.length == 1 && Taro.$isIphoneX) {
    bottomHight = true;
  }

  return (
    <View className={['customeMenuTabs', false && 'unShow'].join(' ')}>
      <View className="menuContent">
        {menuTabList.map((tab, index) => {
          let isActive = tabIndex === index;
          const bannerValue = tab.banner && banner[tab.banner];

          return (
            <View
              className="item common"
              onClick={() => setPage(tab.name)}
              key={tab.text + '_' + index}
            >
              {bannerValue ? (
                <View className={classNames('banner', { one: bannerValue.length === 1 })}>
                  <View className="txt">{bannerValue}</View>
                </View>
              ) : null}
              {/* <Image
                className={'barIcon ' + (isActive ? 'customePageStyle' : '')}
                src={tab.iconPath}
              /> */}
              <Icon
                name={tab.iconName}
                className={'barIcon ' + (isActive ? '' : 'barIconUnActive')}
                size="44"
                color={isActive ? undefined : '#333333'}
              />
              <Text className={'label ' + (isActive ? 'customePageStyle' : '')}>{tab.text}</Text>
            </View>
          );
        })}
      </View>
      <View className={['menuBottom', bottomHight && 'high'].join(' ')}></View>
    </View>
  );
};

export default TabsMenu;
